$(function() {

	var imgWhole, imgPart,
		upNum = [false, false];

	$('.de-fn').on('click', 'button', function(event) {
		if (this.className.indexOf('de-whole') !== -1) {
			$('#de-whole').trigger('click');
		} else {
			$('#de-part').trigger('click');
		}
	});

	//读取文件并预览
	$('#de-whole').on('change', function(event) {
		var file = event.target.files[0];
		if (!!file) {
			var fileReader = new FileReader();
			fileReader.onload = function(e) {
				var $show = $('.de-show:eq(0)'),
					deNum = 2;
				imgWhole = e.target.result;
				$show.find('img').remove()
					.end().find('.de-placehold').hide();
				$('<img/>').attr('src', imgWhole).addClass('de-img img-thumbnail')
					.appendTo($show);
				upNum[1] = true;
				upNum.forEach(function(el, index) {
					if (el === true) deNum--;
				});
				if (deNum === 0) {
					$('.de-num').hide('fast');
					$('.de-save').prop('disabled', '');
				} else {
					$('.de-num span').text(deNum);
				}
			};

			fileReader.readAsDataURL(file);
		}
	});

	$('#de-part').on('change', function(event) {
		var file = event.target.files[0];
		if (!!file) {
			var fileReader = new FileReader();
			fileReader.onload = function(e) {
				var $show = $('.de-show:eq(1)'),
					deNum = 2;
				imgPart = e.target.result;
				$show.find('img').remove()
					.end().find('.de-placehold').hide();
				$('<img/>').attr('src', imgPart).addClass('de-img img-thumbnail')
					.appendTo($show);
				upNum[0] = true;
				upNum.forEach(function(el, index) {
					if (el === true) deNum--;
				});
				if (deNum === 0) {
					$('.de-num').hide('fast');
					$('.de-save').prop('disabled', '');
				} else {
					$('.de-num span').text(deNum);
				}
			};

			fileReader.readAsDataURL(file);
		}
	});

	//点击“确定上传”按钮，弹出描述框
	$('.de-save').on('click', function(event) {
		var img = new Image(),
			canvas, context,
			wrapCanvas = [{
				"id": "cv-whole",
				"src": imgWhole
			}, {
				"id": "cv-part",
				"src": imgPart
			}];
		wrapCanvas.forEach(function(el, index) {
			canvas = document.getElementById(el.id);
			context = canvas.getContext('2d');
			img.src = el.src;
			realWidth = img.height >= img.width * 1.5 ? img.width : Math.floor(img.height / 1.5);
			context.drawImage(img, 0, 0, img.width, img.width * 1.5);
		});

		$('#zhezhao').show();
		$('.add-desc').show();
	});

	//点击“大功告成按钮”，上传到服务器
	$('#js-deFinish').on('click', function(event) {
		event.preventDefault();
		var t = document.getElementById('ds-sort');
		var desc = $('.ds-desc').val(),
			head = document.getElementById('ds-head').value,
			sort = t.value;
		imgWhole = document.getElementById('cv-whole').toDataURL('image/png').substr(22);
		imgPart = document.getElementById('cv-part').toDataURL('image/png').substr(22);

		//canvas导出图片并上传到服务器和保存到用户本地(以打开新链接的方式)
		$.ajax({
				//服务器处理程序
				url: 'test_data/designUp.json',
				type: 'POST',
				dataType: 'json',
				data: {
					'whole': imgWhole,
					'part': imgPart,
					'sort': sort,
					'content': desc,
					'title': head
				}
			})
			.done(function(data) {
				if (data.statu == 1) {
					$('.submit-bar').hide('fast');
					$('.submit-clear').show('fast');
				} else {
					$('.submit-fail').show('fast');
				}
			})
			.fail(function(data) {
				console.log("de error");
				$('.submit-bar').hide('fast');
				$('.submit-fail').show('fast');
			})
			.always(function() {
				console.log("de complete");
			});
	});

	$(document).ajaxSend(function(e, xhr, setting) {
		if (setting.url == 'test_data/designUp.json') {
			$('.add-desc').hide('fast');
			$('.submit-bar').show('fast');
		}
	});

	$('.ds-cancel').on('click', function(event) {
		$(this).closest('section').hide();
		$('#zhezhao').hide();
	});

	//上传失败按钮
	$('.de-fail').on('click', function() {
		$('.ds-finish').trigger('click');
	});
});